<template>
  <div class="shoplist_container">
    <div class="shoplist_color"></div>
    <div class="shoplist_content" @click="goshoplists">人气推荐 ></div>
    <div class="shoplist_list">
      <div
        class="shoplist_list_item"
        v-for="item in shoplist"
        :key="item.id"
        @click="goshopdetail(item.id)"
      >
        <img :src="item.pic" alt="" />
        <p class="shoplist_p_one">{{ item.name }}</p>
        <p class="shoplist_p_two">{{ item.characteristic }}</p>
        <p class="shoplist_p_three">{{ item.minPrice }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoplist: [],
    };
  },
  mounted() {
    this.$API.getList().then((res) => {
      console.log(res);
      this.shoplist = res.data.data.slice(9, 13);
    });
  },
  methods: {
    goshoplists() {
      this.$router.push("/shoplists");
    },
    goshopdetail(id) {
      this.$router.push({
        path: "/shopdetail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style scoped>
.shoplist_container {
  width: 100%;
  /* height: 5rem; */
}
.shoplist_color {
  width: 100%;
  height: 0.3rem;
  background-color: rgb(238, 237, 237);
}
.shoplist_content {
  width: 100%;
  height: 1rem;
  /* background-color: aquamarine; */
  text-align: center;
  line-height: 1rem;
}
.shoplist_list {
  width: 100%;
  /* height: 5rem; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.shoplist_list_item {
  width: 45%;
  height: 6rem;
}
.shoplist_list_item img {
  width: 100%;
  height: 4rem;
}
.shoplist_list_item p {
  margin-top: 0.1rem;
}
.shoplist_p_two {
  font-size: 0.2rem;
  color: gray;
}
.shoplist_p_three {
  color: red;
  font-size: 0.25rem;
}
.shoplist_p_one {
  /* font-size: 0.4rem;
  color: white;
  margin-top: 0.2rem;
  width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */

  font-size: 0.3rem;
  color: #000000;
  /* width: 2rem; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>